<!DOCTYPE html>



<html>







<head>



	<meta charset="utf-8">



	<title></title>/public/static/

/public/static/

	<meta name="renderer" content="webkit">



	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">



	<meta name="viewport"



		content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">



	<link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">



	<link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">



</head>







<body>



	<div class="layui-fluid">



		<div class="layui-row layui-col-space15">



			<div class="layui-col-md12">

/public/static/

				<div class="layui-card">



					<div class="layui-card-body">



						<table class="layui-hide" id="test-table-reload" lay-filter="role"></table>



					</div>

/public/static/

				</div>



			</div>/public/static/



		</div>



	</div>



	<script type="text/html" id="toolbar">



			<a class="layui-btn layui-btn-sm  layuiadmin-btn-list" data-type="add"><i class="layui-icon">&#xe608;</i>添加</a>



			<a class="layui-btn layui-btn-danger layui-btn-sm  layuiadmin-btn-list" data-type="batchdel"><i class="layui-icon">&#xe640;</i>删除</a>



		</script>



	<script type="text/html" id="operateTpl">



			<a class="layui-btn layui-btn-sm" lay-event="edit">编辑</a>



			<a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="del">删除</a>



		</script>



	<script type="text/html" id="imgTpl">



			<img width="200" src="{{d.images}}" onerror="javascript:this.src='/static/Admin/img/default.png';" />



		</script>



	<script type="text/html" id="showTpl">



			<input type="checkbox" name="show" value="{{d.id}}" lay-skin="switch" lay-text="显示|不显示" lay-filter="showDemo" {{ d.show == 1 ? 'checked' : '' }}>



		</script>



	<script type="text/html" id="statusTpl">



			<input type="checkbox" name="status" value="{{d.id}}" lay-skin="switch" lay-text="正常|停用" lay-filter="statusDemo" {{ d.status == 1 ? 'checked' : '' }}>



		</script>



	<script src="/static/layuiadmin/layui/layui.js"></script>



	<script>



		layui.config({



			base: '/static/layuiadmin/' // 静态资源所在路径



		}).extend({



			index: 'lib/index', // 主入口模块



			api: 'api'



		}).use(['index', 'table', 'api', 'form', 'laydate', 'laypage', 'layer'], function () {



			var $ = layui.jquery;



			var table = layui.table;



			var layer = layui.layer;



			var laydate = layui.laydate;



			var laypage = layui.laypage;



			var api = layui.api;



			var form = layui.form;







			var _table = {



				reloads: function () {



					renderTable();



				}



			}







			window.tables = _table;







			var renderTable = function () {



				// 执行一个 table 实例



				table.render({



					elem: '#test-table-reload',



					url: '{:url("getList")}?module_id={$params.module_id}', // 数据接口



					title: '文件',



					page: true, // 开启分页



					toolbar: '#toolbar', // 开启工具栏，此处显示默认图标，可以自定义模板，详见文档



					cols: [



						[



							// 表头



							{



								type: 'checkbox'



							}, {



								field: 'id',



								title: 'ID',



								width: 80,



								sort: true



							}, {



								field: 'title',



								title: '名称',



								edit: 'text',



							}, {



								field: 'orders',



								title: '排序号',



								width: 100,



								edit: 'text',



							}, {



								field: 'create_time',



								title: '创建时间',



								width: 170



							}, {



								title: '操作',



								width: 135,



								templet: '#operateTpl'



							}



						]



					],



					height: 'full-100',



					limit: 30,



					limits: [30, 50, 100, 150, 200, 300, 500],



					done: function () {



						layer.closeAll('loading');



					}



				});



			}







			// 方法级渲染



			var $ = layui.$,



				active = {



					batchdel: function () {



						var checkStatus = table.checkStatus('test-table-reload'),



							checkData = checkStatus.data; // 得到选中的数据



						if (checkData.length === 0) {



							return layer.msg('请选择要删除的数据', {



								icon: 0,



								shade: [0.5, '#393D49']



							});



						}



						layer.confirm('确定删除吗？', function (index) {



							var dats = {



								ids: []



							};



							for (var k in checkData) {



								dats.ids.push(checkData[k].id);



							}



							layer.msg('删除中', {



								icon: 16,



								shade: 0.01



							});



							api.ajax('{:url("delete")}', 'post', 'json', dats, function (res) {



								layer.closeAll('loading');



								layer.msg(res.msg)



							});



							renderTable();



						});



					},



					add: function () {



						parent.layui.index.openTabsPage('{:url("add")}?module_id={$params.module_id}', '添加');



					}



				};







			// 监听单元格编辑



			table.on('edit(role)', function (obj) {



				var value = obj.value, // 得到修改后的值



					data = obj.data, // 得到所在行所有键值



					field = obj.field; // 得到字段



				var dats = {};



				dats['id'] = data.id;



				dats[field] = value



				api.ajax('{:url("inputChange")}', 'post', 'json', dats, function (res) {



					layer.msg(res.msg)



				});



			});







			// 监听性别操作



			form.on('switch(showDemo)', function (obj) {



				var dats = {},



					val = 1;



				dats['id'] = this.value;



				if (!obj.elem.checked) {



					val = 2



				}



				dats[this.name] = val;



				layer.msg('加载中', {



					icon: 16,



					shade: 0.01



				});



				api.ajax('{:url("inputChange")}', 'post', 'json', dats, function (res) {



					layer.closeAll('loading');



					layer.msg(res.msg)



				});



			});







			// 监听性别操作



			form.on('switch(statusDemo)', function (obj) {



				var dats = {},



					val = 1;



				dats['id'] = this.value;



				if (!obj.elem.checked) {



					val = 2



				}



				dats[this.name] = val;



				layer.msg('加载中', {



					icon: 16,



					shade: 0.01



				});



				api.ajax('{:url("inputChange")}', 'post', 'json', dats, function (res) {



					layer.closeAll('loading');



					layer.msg(res.msg)



				});



			});







			// 监听工具条 



			table.on('tool(role)', function (obj) {



				// 注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"



				var data = obj.data; // 获得当前行数据



				var layEvent = obj.event; // 获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）



				var tr = obj.tr; // 获得当前行 tr 的 DOM 对象（如果有的话）



				if (layEvent === 'detail') {



					// 查看



					// do somehing



				} else if (layEvent === 'del') {



					// 删除



					layer.confirm('确定要删除么', function (index) {



						var dats = {



							ids: [data.id]



						};



						layer.msg('加载中', {



							icon: 16,



							shade: 0.01



						});



						api.ajax('{:url("delete")}', 'post', 'json', dats, function (res) {



							layer.closeAll('loading');



							layer.msg(res.msg);



							obj.del(); // 删除对应行（tr）的DOM结构，并更新缓存



							layer.close(index); // 向服务端发送删除指令



						});



					});



				} else if (layEvent === 'edit') {



					// 编辑



					parent.layui.index.openTabsPage('{:url("edit")}?id=' + data.id, '编辑');



				} else if (layEvent === 'LAYTABLE_TIPS') {



					layer.alert('Hi，头部工具栏扩展的右侧图标。');



				}



			});







			$('.layui-card').on('click', '.layuiadmin-btn-list', function () {



				var type = $(this).data('type');



				active[type] ? active[type].call(this) : '';



			});



			renderTable();



		});



	</script>



	<style type="text/css">



		.layui-table-cell {



			text-align: center;



			height: auto;



			white-space: normal;



		}



	</style>



</body>







</html>